<!--
 @description 角色名单配置
 @fileName index.vue
 @author zengqiongying
 @created 2024/01/19 09:36:38
-->
<template>
  <div class="qup-full-page">
    <template v-if="showPageType==='config'">
      <ConfigList :page-show.sync="showPageType" :detail="activeRowData" edit-able />
    </template>
    <template v-if="showPageType==='detail'">
      <ConfigList :page-show.sync="showPageType" :detail="activeRowData" />
    </template>
    <div v-show="!showPageType">
      <table-box
        ref="refTable"
        :selected-arry.sync="tableSelected"
        :table-config="tableConfig"
        :other-filters="otherFilters"
        :off-set="-10"
        table-row-key="id"
        show-index
        :show-custom-collect="false"
        :show-custom-combine="false"
        :show-custom-setting="false"
        :setting-auto-request="false"
        @btnOperate="btnOperate"
      />
      <EditBasic
        v-if="showEditBasic"
        ref="refEditPage"
        :visible.sync="showEditBasic"
        :detail="activeRowData"
        @success="handleBasicSuccess"
      />
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import { delRole } from '@/api/roleConfig'
import ConfigList from './ConfigList'
import EditBasic from './EditBasic'
export default {
  name: 'RoleConfig',
  components: { EditBasic, ConfigList },
  data() {
    const that = this
    return {
      showPageType: '', // 显示页面类型：config 配置， detail 详情
      showEditBasic: false, // 是否编辑基础信息
      activeRowData: '', // 当前选中行数据
      tableSelected: [], // 当前所选中表格行数据
      otherFilters: [
        { id: 'dr', property: 'dr', operator: '=', value: 0 }
      ], // 表格额外查询条件va
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/role/page`,
        pageSize: 20,
        sort: 'lastUpdateTime',
        setting: [
          {
            prop: 'name',
            label: '角色名称',
            minWidth: 150,
            className: 'btn-green',
            isButton: true,
            clickFun: this.handleToDetail
          },
          {
            prop: 'status',
            label: '状态',
            width: 100,
            type: 'hidden',
            formatData: (row) => {
              return that.getStatusName(row)
            }
          },
          {
            prop: 'effectiveBeginTime',
            label: '生效时间',
            minWidth: 150,
            type: 'hidden',
            formatData: ({ effectiveBeginTime, status }) => {
              return [2, '2'].includes(status) ? parseTime(effectiveBeginTime) : ''
            }
          },
          {
            prop: 'createBy',
            label: '创建人',
            minWidth: 150,
            type: 'text'
          },
          {
            prop: 'createTime',
            label: '创建时间',
            minWidth: 150,
            type: 'date',
            formatData: ({ createTime }) => {
              return parseTime(createTime)
            }
          },
          {
            prop: 'lastUpdateBy',
            label: '修改人',
            minWidth: 150,
            type: 'hidden'
          },
          {
            prop: 'lastUpdateTime',
            label: '修改时间',
            minWidth: 150,
            type: 'hidden',
            formatData: ({ lastUpdateTime }) => {
              return parseTime(lastUpdateTime)
            }
          }],
        btnList: !this.isProduction ? [
          {
            buttonName: '新增',
            optCode: 'add',
            outerFlag: true
          },
          {
            buttonName: '编辑',
            optCode: 'edit',
            outerFlag: true
          },
          {
            buttonName: '名单配置',
            optCode: 'config',
            outerFlag: true
          },
          {
            buttonName: '删除',
            optCode: 'del',
            outerFlag: true
          }] : null
      }
    }
  },
  watch: {
    showPageType(val, oldVal) {
      if (!val) {
        this.activeRowData = ''
      }
    }
  },
  created() {

  },
  methods: {
    getStatusName({ effectiveBeginTime, status }) {
      if (['1', 1].includes(status)) {
        return '生效'
      }
      if (['2', 2].includes(status)) {
        // 定时生效
        if (effectiveBeginTime) {
          const now = new Date().getTime()
          const time = new Date(parseTime(effectiveBeginTime)).getTime()
          if (now >= time) {
            return '生效'
          }
        }
      }
      return '未生效'
    },
    btnOperate(code) {
      switch (code) {
        case 'add':
          this.handleEdit()
          break
        case 'edit':
          if (!this.singleJudge(this.tableSelected, '编辑', true)) {
            return
          }
          this.handleEdit(this.tableSelected[0])
          break
        case 'config':
          if (!this.singleJudge(this.tableSelected, '名单配置', true)) {
            return
          }
          this.handleConfig(this.tableSelected[0])
          break
        case 'del':
          if (!this.singleJudge(this.tableSelected, '删除', true)) {
            return
          }
          this.handleDelete()
          break
        default:
          break
      }
    },
    // 刷新表格数据
    refreshTable(isInit) {
      this.$nextTick(() => {
        this.$refs.refTable.initTableData(isInit ? '' : 'onPage')
      })
    },
    // 详情跳转
    handleToDetail(row) {
      if (!row.id) {
        this.$message.warning('数据异常')
        return
      }
      this.activeRowData = row
      this.$nextTick(() => {
        this.showPageType = 'detail'
      })
    },
    // 配置楼层
    handleConfig(row) {
      this.activeRowData = row
      this.$nextTick(() => {
        this.showPageType = 'config'
      })
    },
    // 新增/编辑基础信息
    handleEdit(row) {
      this.activeRowData = row || ''
      this.$nextTick(() => {
        this.showEditBasic = true
      })
    },
    handleBasicSuccess(res) {
      const data = res.data
      const goConfig = res.goConfig // 是否前往配置
      this.refreshTable(!!data.id)
      if (goConfig) {
        this.showPageType = 'config'
        this.activeRowData = data
        this.tableSelected = [data]
      }
    },
    // 删除处理
    handleDelete() {
      this.$confirm('此操作将永久删除该角色,并清空已经引用该角色的权限关系，是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const id = this.tableSelected[0].id
        delRole(id).then(res => {
          if (res.success === 1) {
            this.$message({
              message: res.msg || '删除成功',
              type: 'success'
            })
            this.refreshTable()
          }
        })
      }).catch(() => {})
    }
  }
}
</script>
<style lang='scss' scoped>

</style>
